
import React, { useEffect, useRef, useState } from 'react';

interface IhideRowStyle{
  height: string
  opacity: number
  transition?: string
}

export default function (props: any) {

  let unmount = false;

  const wrapRef = useRef<HTMLDivElement>(null);


  const [hideRowHeight, setHideRowHeight] = useState(0); // 容器高度
  const [hideRowStyle, setHideRowStyle] = useState<IhideRowStyle>({ height: 'auto', opacity: 0, transition: props.static ? '0' : '0.5s' });// 样式

  /* 隐藏/开启 */
  const handleProductChange = () => {
    if (!props.isShow) {
      setHideRowStyle({ ...hideRowStyle, height: '0', opacity: 0, });
    } else {
      setHideRowStyle({ ...hideRowStyle, height: `${hideRowHeight}px`, opacity: 1, });
    }
  };

  /* 初始化储存容器高度 */
  useEffect(() => {
    console.log((wrapRef.current as HTMLDivElement).getBoundingClientRect().height)

    setHideRowHeight((wrapRef.current as HTMLDivElement).getBoundingClientRect().height);
    setTimeout(() => {
      setHideRowStyle({ ...hideRowStyle, height: '0', opacity: 0, transition: props.static ? '0': '0.5s' });
    }, 0);
    return () => {
      unmount = false;
    };
  }, []);

  useEffect(() => {
    handleProductChange();
  }, [props.isShow])

  return <div ref={wrapRef} className={`hide_slide_box ${props.className}`} style={hideRowStyle}>
    {props.children}
  </div>

}